<template>
  <div class="test">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/HelloWorld' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">文章管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>文章列表</el-breadcrumb-item>
    </el-breadcrumb>

<!--    表格内容-->
    <el-card class="box-card" style="margin-top: 15px">

<!--      添加按钮-->
      <el-button type="primary" @click="add()">添加</el-button>

      <el-input clearable style="width: 200px;margin-left: 20px"
          placeholder="请输入内容"
          v-model="param.key">
      </el-input>
      <el-button type="info" icon="el-icon-search" @click="search()">搜索</el-button>

      <el-table border
          :data="tableData"
          style="width: 100%;margin-top: 15px">
        <el-table-column
            prop="create_time"
            label="日期"
            width="180">
        </el-table-column>
        <el-table-column
            prop="title"
            label="文章标题"
            width="180">
        </el-table-column>
        <el-table-column
            prop="sort"
            label="排序">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
<!--            {{scope.row}}-->
            <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="param.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total=total>
      </el-pagination>

<!--添加弹窗-->
      <el-dialog
          title="添加表单"
          :visible.sync="adddialogVisible"
          width="30%">

<!--        添加表单-->
        <el-form ref="form" :model="Addform" label-width="80px">
          <el-form-item label="文章标题">
            <el-input v-model="Addform.title"></el-input>
          </el-form-item>
          <el-form-item label="文章内容">
            <el-input type="textarea" v-model="Addform.content"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
        <el-button @click="adddialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSave()">确 定</el-button>
        </span>
      </el-dialog>


      <!--编辑弹窗-->
      <el-dialog
          title="编辑表单"
          :visible.sync="editdialogVisible"
          width="30%">

        <!--        编辑表单-->
        <el-form ref="form" :model="Editform" label-width="80px">
          <el-form-item label="文章标题">
            <el-input v-model="Editform.title"></el-input>
          </el-form-item>
          <el-form-item label="文章内容">
            <el-input type="textarea" v-model="Editform.content"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
        <el-button @click="editdialogVisible= false">取 消</el-button>
        <el-button type="primary" @click="editSave()">确 定</el-button>
        </span>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
export default {
  name: "Artcile",
  data() {
    return {
      param:{
        key:'',
        page:1,
        limit:10
      },
      tableData: [],
      currentPage:1,
      total:0,
      adddialogVisible:false,
      editdialogVisible:false,
      Addform:{
        title:'',
        content:''
      },
      Editform:{
        id:'',
        title:'',
        content:''
      }
    }
  },
  methods:{
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.param.limit=val;
      this.init();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.param.page=val;
      this.init();
    },
    search(){
      this.init();
    },
    add(){
      // console.log('add');
      this.adddialogVisible=true;
    },
    edit(info){
      console.log(info);
      this.editdialogVisible=true;
      this.Editform.title=info.title;
      this.Editform.content=info.content;
      this.Editform.id=info.id;
    },
    async editSave()
    {
      //提交数据
      const {data: res} =await this.$ajax.post('http://www.caihuay.com.cn/index.php/Article/save',
          this.Editform)
      console.log(res);
      if(res.code===1)
      {
        this.$msg.success(res.msg);
        //刷新表格数据
        this.init();
        //关闭弹窗
        this.editdialogVisible=false;
        this.Editform.title="";
        this.Editform.content="";
      }
      else
      {
        this.$msg.success(res.msg);
      }

    },
    async addSave()
    {
      //提交数据
      const {data: res} =await this.$ajax.post('http://www.caihuay.com.cn/index.php/Article/save',
          this.Addform)
      console.log(res);
      if(res.code===1)
      {
        this.$msg.success(res.msg);
        //刷新表格数据
        this.init();
        //关闭弹窗
        this.adddialogVisible=false;
        this.Addform.title="";
        this.Addform.content="";
      }
      else
      {
        this.$msg.success(res.msg);
      }
    },
    //需要vue封装后端url
    async init() {
      const {data: res} =await this.$ajax.get('http://www.caihuay.com.cn/index.php/Article/index',
          {params: this.param})
      console.log(res);
      this.tableData=res.data;
      this.total=res.total;
    },
    async del(id){
      console.log(id);
      const {data: res} =await this.$ajax.get('http://www.caihuay.com.cn/index.php/Article/delete',
          {params: {id:id}})
      console.log(res);
      if(res.code===1)
      {
        this.$msg.success(res.msg);
        this.init();
      }
      else
      {
        this.$msg.success(res.msg);
      }
    }
  },
  created() {
    let _this = this;
    _this.init();
  }
}
</script>

<style scoped>
.el-pagination
{
  margin-top: 10px;
}
</style>
